<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逍遥</title>
    <script src="../static/echarts.js"></script>
    <script src="./static/echarts.js"></script>
    <script src="./static/jquery.js"></script>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body>
股票编码（上海）：<input id="stock_id">
<button id="search">查询</button>
<div class="layui-row">
    <div class="layui-col-md6">
        <div id="screen" style="width: 700px;height: 800px"></div></div>
    <div class="layui-col-md6">
        <div id="screen2" style="width: 700px;height: 500px"></div></div>
    </div>
<button id="fake" style="display: none"></button>

</body>
<script>
    var fake = document.getElementById('fake');
    fake.data = [1,2];
    //fake.data2 = [1,2];
    render = document.getElementById('search');
    render.onclick = function() {
        stock_id = document.getElementById('stock_id').value
        $.ajax({
            url:'/get_info',
            type:'GET',
            traditional:true,
            data:{id:stock_id},
            async:false,
            success:function (data) {
                fake.data = data.all_info;

            }
            ,error:function(){alert('error')}



        })
        //alert(fake.data);

        //rawData = [[self.id,date_list,data_list],MACD]
        rawData = fake.data;
        var upColor = '#00da3c';
        var downColor = '#ec0000';
        var myChart = echarts.init(document.getElementById('screen'));
        var detectChart = echarts.init(document.getElementById('screen2'));

        function splitData(rawData) {
            var categoryData = rawData[0][1];
            var values = rawData[0][2];
            var macd = rawData[1];
            var catted_macd = rawData[3];


            return {
                categoryData: categoryData,
                values: values,
                avg: macd,
                date2:rawData[2][1],
                cat_data:rawData[2][0],
                catted_macd:catted_macd

            };
        }

        function calculateMA(dayCount, data) {
            var result = [];

            for (var i = 0, len = data.values.length; i < len; i++) {
                if (i < dayCount) {
                    result.push('-');
                    continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                    sum += parseFloat(data.values[i - j][1]);
                }
                //alert(sum)
                result.push((sum / dayCount).toFixed(3));
            }

            return result;
        }
        function calculateMA2(dayCount, data) {
            var result = [];

            for (var i = 0, len = data.cat_data.length; i < len; i++) {
                if (i < dayCount) {
                    result.push('-');
                    continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                    sum += parseFloat(data.cat_data[i - j][1]);
                }
                //alert(sum)
                result.push((sum / dayCount).toFixed(3));
            }

            return result;
        }

        var data = splitData(rawData);

        myChart.setOption(option = {
            title: {text: rawData[0][0]},
            legend: {

                left: 'center',
                data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },

                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                },
                position: function (pos, params, el, elRect, size) {
                    var obj = {top: 10};
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                    return obj;
                }
                // extraCssText: 'width: 170px'
            },
            axisPointer: {
                link: {xAxisIndex: 'all'},

            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: true
                    },

                }
            },


            grid: [
                {
                    left: '10%',
                    right: '8%',
                    height: '50%'
                },
                {
                    left: '10%',
                    right: '8%',
                    top: '63%',
                    height: '16%'
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: data.categoryData,
                    scale: true,

                    axisLine: {onZero: false},

                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        z: 100
                    }
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    data: data.categoryData,
                    scale: true,
                    boundaryGap: true,
                    axisLine: {onZero: false},

                    splitLine: {show: false},

                    splitNumber: 100,
                    min: 'dataMin',
                    max: 'dataMax'
                }
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 1,
                    axisLabel: {show: false},
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false}
                }
            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: false,
                    startValue: 0,
                    endValue: data.length
                },
                {
                    show: true,
                    xAxisIndex: [0, 1],
                    type: 'slider',
                    top: '85%',
                    startValue: 0,
                    endValue: data.length
                }
            ],
            series: [
                {
                    name: 'Dow-Jones index',
                    type: 'candlestick',
                    data: data.values,

                },
                {
                    name: 'MA5',
                    type: 'line',
                    data: calculateMA(5, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA10',
                    type: 'line',
                    data: calculateMA(10, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA20',
                    type: 'line',
                    data: calculateMA(20, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA30',
                    type: 'line',
                    data: calculateMA(30, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MACD',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: data.avg
                }
            ]
        });
        detectChart.setOption(option = {
            title: {text: '推测结果'},
            legend: {

                left: 'center',
                data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },

                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                },
                position: function (pos, params, el, elRect, size) {
                    var obj = {top: 10};
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                    return obj;
                }
                // extraCssText: 'width: 170px'
            },
            axisPointer: {
                link: {xAxisIndex: 'all'},

            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: true
                    },

                }
            },


            grid: [
                {
                    left: '10%',
                    right: '8%',
                    height: '50%'
                },
                {
                    left: '10%',
                    right: '8%',
                    top: '63%',
                    height: '16%'
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: data.date2,
                    scale: true,

                    axisLine: {onZero: false},

                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        z: 100
                    }
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    data: data.date2,
                    scale: true,
                    boundaryGap: true,
                    axisLine: {onZero: false},

                    splitLine: {show: false},

                    splitNumber: 100,
                    min: 'dataMin',
                    max: 'dataMax'
                }
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 1,
                    axisLabel: {show: false},
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false}
                }
            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: false,
                    startValue: 0,
                    endValue: data.length
                },
                {
                    show: true,
                    xAxisIndex: [0, 1],
                    type: 'slider',
                    top: '85%',
                    startValue: 0,
                    endValue: data.length
                }
            ],
            series: [
                {
                    name: 'Dow-Jones index',
                    type: 'candlestick',
                    data: data.cat_data,

                },
                {
                    name: 'MA5',
                    type: 'line',
                    data: calculateMA2(5, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA10',
                    type: 'line',
                    data: calculateMA2(10, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA20',
                    type: 'line',
                    data: calculateMA2(20, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MA30',
                    type: 'line',
                    data: calculateMA2(30, data),
                    smooth: true,
                    lineStyle: {
                        opacity: 0.5
                    }
                },
                {
                    name: 'MACD',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: data.catted_macd
                }
            ]
        });
    }


</script>
</html>